<template>
  <el-container>
    <el-header style="background: #fff; border: 1px #e9eef3 solid;">
      <h1 class="title">学生公寓分配管理系统——学生端</h1>
      <el-dropdown style="float: right; margin-top: 30px; margin-right: 50px; font-size: 20px;">
        <span class="el-dropdown-link">
          {{ user.name }}
          <el-icon class="el-icon--right">
            <arrow-down/>
          </el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>'

      <!-- 左侧导航栏 -->
      <el-aside width="200px" style="height: 80%;">
        <el-menu default-active="/" router class="el-menu-vertical-demo" default-openeds="{1,2}">
          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <user/>
              </el-icon>
              <span>学生管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/">个人信息</el-menu-item>
              <el-menu-item index="/roommate">室友信息</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2" disabled>
            <template #title>
              <el-icon>
                <user/>
              </el-icon>
              <span>宿舍信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" disabled>宿舍报修</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容栏 -->
      <el-main style="background-color: #fff;">
        <el-table
            :data="tableData"
            style="width: 100%; padding: 8px 8px 0 8px;">
          <el-table-column prop="sid" label="学号" width="120"/>
          <el-table-column prop="name" label="姓名" width="120"/>
          <el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"/>
          <el-table-column prop="major" label="专业" width="120"/>
          <el-table-column prop="classroom" label="班级" width="120"/>
          <el-table-column prop="cellphone" label="手机号码" width="130"/>
          <el-table-column prop="nation" label="民族" width="120"/>
          <el-table-column prop="buildingName" label="宿舍楼" width="120"/>
          <el-table-column prop="roomNum" label="宿舍号" width="120"/>
          <el-table-column prop="bedNum" label="床位号" width="120"/>
        </el-table>
      </el-main>
    </el-container>
  </el-container>


</template>

<script>
import {ElMessage, ElMessageBox} from "element-plus";
import {User, ArrowDown} from '@element-plus/icons'
import axios from 'axios'

export default {
  data() {
    return {
      user: {
        sid: '',
        name: '',
      },
      tableData: [],
    }
  },

  methods: {
    /*
       将后端传来性别的0，1转为男女给table
     */
    formatSex(row, column, cellValue) {
      if (cellValue == 0) {
        return '男'
      } else if (cellValue == 1) {
        return '女'
      }
    },

    /*
        退出登录
     */
    logout() {
      // 后端删除Session
      axios.get("/stu/logout");

      // 清除sessionStorage
      sessionStorage.clear();

      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '账号已退出！',
        type: 'success',
      })

      // 跳转到登录页面
      this.$router.push("/stuLogin");
    },

  },

  mounted() {
    // 判断用户是否已经登录
    if (!sessionStorage.getItem('name')) {
      // 弹出提示窗口
      ElMessage({
        showClose: true,
        message: '请登录！',
        type: 'error',
      })
      // 路由跳转
      this.$router.push('/stuLogin');
      return;
    }

    // 从sessionStorage获取用户名，赋值给data
    this.user.sid = sessionStorage.getItem("sid");
    this.user.name = sessionStorage.getItem("name");

    let that = this.$router;
    let _this = this.$data;
    // 通过axios查询学生信息
    axios.post('/stu/selectSelf')
        .then(function (res) {
          if (res.data.status == 10014) {
            // 弹出提示窗口
            ElMessage({
              showClose: true,
              message: '未登录，请重新登录！',
              type: 'error',
            })
            // 路由跳转
            that.push('/stuLogin');
            return;
          }
          _this.tableData[0] = res.data.data
        })



  },

  components: {
    User,
    ArrowDown
  }
}
</script>

<style scoped>
.el-header, .el-footer {
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  margin: 0px;
  padding: 0px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  width: 100%;
  height: 80px;
  display: block;
  line-height: 80px;
  padding-left: 50px;
}

.el-header .title {
  font-size: 20px;
  float: left;
  color: #303133;
}

.addStuBtn .el-button {
  float: left;
  margin: 10px 100px 10px 10px;
}

.footer .el-pagination {
  float: right;
  margin: 20px 30px 10px 10px;
}
</style>